<template>
    <form action="">
        <h3 class="text-muted my-5">添加新的pizza</h3>

        <div class="form-group row">
            <label class="col-sm-2">品种</label>

            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="newpizza.name">
            </div>
        </div>


        <div class="form-group row">
            <label class="col-sm-2">描述</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="" cols="30" rows="5" v-model="newpizza.description"></textarea>
            </div>
        </div>

        <p><strong>选项1</strong></p>
        <div class="form-group row">
            <label  class="col-sm-2">尺寸</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="newpizza.size">
            </div>
        </div>

         <div class="form-group row">
            <label  class="col-sm-2">价格</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="newpizza.price">
            </div>
        </div>

        <p><strong>选项2</strong></p>
        <div class="form-group row">
            <label  class="col-sm-2">尺寸</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="newpizza.size1">
            </div>
        </div>

         <div class="form-group row">
            <label  class="col-sm-2">价格</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="newpizza.price1">
            </div>
        </div>

        <div class="form-group row">
            <button class="btn btn-success btn-block"  @click="addMenuItem">添加</button>
        </div>

    </form>
</template>


<script>
import axios from 'axios'

export default {
    data(){
        return{
            newpizza:{}
        }
    },

    methods:{
        addMenuItem(){

            let info={
                name:this.newpizza.name,
                description:this.newpizza.description,
                options:JSON.stringify([
                    {size:this.newpizza.size,price:this.newpizza.price},
                    {size:this.newpizza.size1,price:this.newpizza.price1}
                ])
            }


        axios.post('/menu',info).then(res=>{
            this.$router.push("/menu")
        })

        }
    }



}
</script>